<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>

	</head>
	<body>
		<div id="box">
			<ul class="list">

			</ul>

		</div>
		<button type="button">点击渲染</button>
		<script type="text/javascript">
			document.querySelector('button').onclick = function() {
				//创建一个AJAX请求实例对象
				let xhr = new XMLHttpRequest()
				//配置xhr对象
				xhr.open("GET", "js_data.php")
				//发送请求
				xhr.send()
				xhr.onreadystatechange = function() {
					if (xhr.readyState === 4) {
						//接收响应传回的数据
						let json = xhr.responseText;
						//将json数据转成可用的js数据
						json = JSON.parse(json);
						let html;
						for (let i = 0; i < json.length; i++) {
							html +=`
						<li>
						<img src="${json[i].img}"/>
						</li>
						<li>
						<p>${json[i].title}</p>
						</li>
						
						`

						}
						document.querySelector('.list').innerHTML = html
					}
				}


			}
		</script>
	</body>
</html>
